<template>
  <div class="content">
    <!-- 面包屑区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>公用图表</el-breadcrumb-item>
      <el-breadcrumb-item>公用图表1</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片区域 -->
    <el-card class="box-card">
      <el-row :gutter="40">
        <div class="content_title">
          <p></p>
          <span>图表列表</span>
        </div>
      </el-row>
      <div class="chart_list">
        <ul>
          <li>
            <div class="chart" id="my_bar_Chart"></div>
          </li>
          <li>
            <div class="chart" id="my_line_Chart"></div>
          </li>
          <li>
            <div class="chart" id="my_pie_Chart"></div>
          </li>
          <li>
            <div class="chart" id="my_funnel_Chart"></div>
          </li>
        </ul>
      </div>
    </el-card>
  </div>
</template>

<script>
import data_list from './modules/data.json'
export default {
  data () {
    return {
      data: {
        data_list: []
      }
    }
  },
  mounted () {
    this.data_list = data_list
    this.Rendering_line()
  },
  methods: {
    // 图表
    Rendering_line () {
      // 渲染柱状图
      // 将数据某一项提出重新组成数组
      const line_chart = this.data_list.hourly.data.map(({
        value
      }) => value)
      // 时间过滤器
      const data_time = this.$dateFormat(this.data_list.time, 'yyyy-MM-dd')

      this.myChart = this.$echarts.init(document.getElementById('my_bar_Chart'))
      this.myChart.setOption({
        color: ['#ff6868', '#ffab09', '#28cba3', '#e6b640', '#34aae7', '#8fcace'],
        title: {
          text: ['{a|' + this.data_list.name + '}'],
          subtext: '数据时间：' + data_time,
          x: 'center',
          y: '1%',
          textStyle: {
            rich: {
              a: {
                color: '#205ba7',
                lineHeight: 20,
                fontSize: 20
              },
              b: {
                color: '#205ba7',
                lineHeight: 18,
                fontSize: 15
              }
            }
          },
          subtextStyle: {
            color: '#205ba7',
            lineHeight: 30,
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255,255,255,1)', // 提示背景颜色，默认为透明度为0.7的黑色
          borderColor: '#333', // 提示边框颜色
          borderRadius: 4, // 提示边框圆角，单位px，默认为4
          borderWidth: 0, // 提示边框线宽，单位px，默认为0（无边框）
          padding: 15,
          extraCssText: 'box-shadow:0 0 10px rgba(0,0,0,0.4);',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow',
            // 默认为直线，可选为：'line' | 'shadow'
            shadowStyle: { // 阴影指示器样式设置
              width: 'auto', // 阴影大小
              color: 'rgba(0,0,0,0.05)', // 阴影颜色
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 10
            }
          },
          formatter: function (val) {
            var w = ''
            for (var i = 0; i < val.length; i++) {
              w += val[i].marker + val[i].seriesName + ':' + val[i].value + '<br />'
            }
            return val[0].axisValue + '<br />' + w
          },
          textStyle: {
            color: '#000'
          }
        },
        legend: {
          show: true,
          x: 'center',
          top: '15%'
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '6%',
          top: '25%',
          containLabel: true
        },
        toolbox: {
          show: true,
          right: 20,
          itemGap: 10,
          itemSize: 25,
          showTitle: false,
          feature: {
            saveAsImage: {
              icon: 'image://images/download.png'

            },
            itemSize: 25, // 工具栏 icon 的大小
            emphasis: { // 触发时
              iconStyle: {
                borderColor: '#000' // 图形的描边颜色
              }
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: ['1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时',
            '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时', '24时'
          ],
          splitLine: {
            show: true
          },
          axisLine: {
            onZero: false
          },
          axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
            show: true,
            rotate: 0,
            margin: 8,
            // formatter: null,
            textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              color: '#7b7b7b',
              fontSize: 14
            }
          },
          splitArea: { // 分隔区域
            show: true, // 默认不显示，属性show控制显示与否
            // onGap: null,
            areaStyle: { // 属性areaStyle（详见areaStyle）控制区域样式
              color: ['rgba(250,215,57,0)']
            }
          }
        },
        yAxis: {
          type: 'value',
          splitNumber: 6,
          axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
            show: true,
            margin: 8,
            // formatter: null,
            textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              color: '#7b7b7b',
              fontSize: 14
            }
            // formatter: function(value) {
            //   return (value) + '℃';
            // }
          }
        },
        series: [{
          name: '实况',
          type: 'bar',
          smooth: false,
          symbolSize: 7,
          itemStyle: {
            normal: {
              barBorderRadius: [10, 10, 0, 0]
            }
          },
          label: {
            show: false,
            position: 'top',
            color: '#dea24d',
            shadowBlur: 2,
            shadowColor: 'black',
            shadowOffsetX: 2,
            textStyle: {
              fontSize: 14
            },
            formatter: '{b}'
          },
          areaStyle: {
            normal: {
              lineStyle: {
                color: 'rgba(237,207,125,1)'
              },
              color: new this.$echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [{
                  offset: 0,
                  color: 'rgba(131,174,224,0.3)'
                },
                {
                  offset: 0.5,
                  color: 'rgba(131,174,224,0.05)'
                },
                {
                  offset: 1,
                  color: 'rgba(131,174,224,0)'
                }
                ]
              )
            }
          },
          data: line_chart
        }]
      })

      // 渲染折线图

      // 将数据某一项提出重新组成数组
      const bar_chart = this.data_list.hourly.data.map(({
        dewPoint
      }) => dewPoint)

      this.myChart = this.$echarts.init(document.getElementById('my_line_Chart'))
      this.myChart.setOption({
        color: ['#ffab09', '#28cba3', '#e6b640', '#34aae7', '#8fcace'],
        title: {
          text: ['{a|' + this.data_list.name + '}'],
          subtext: '数据时间：' + data_time,
          x: 'center',
          y: '1%',
          textStyle: {
            rich: {
              a: {
                color: '#ffab09',
                lineHeight: 20,
                fontSize: 20
              },
              b: {
                color: '#ffab09',
                lineHeight: 18,
                fontSize: 15
              }
            }
          },
          subtextStyle: {
            color: '#ffab09',
            lineHeight: 30,
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255,255,255,1)', // 提示背景颜色，默认为透明度为0.7的黑色
          borderColor: '#333', // 提示边框颜色
          borderRadius: 4, // 提示边框圆角，单位px，默认为4
          borderWidth: 0, // 提示边框线宽，单位px，默认为0（无边框）
          padding: 15,
          extraCssText: 'box-shadow:0 0 10px rgba(0,0,0,0.4);',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow',
            // 默认为直线，可选为：'line' | 'shadow'
            shadowStyle: { // 阴影指示器样式设置
              width: 'auto', // 阴影大小
              color: 'rgba(0,0,0,0.05)', // 阴影颜色
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 10
            }
          },
          formatter: function (val) {
            var w = ''
            for (var i = 0; i < val.length; i++) {
              w += val[i].marker + val[i].seriesName + ':' + val[i].value + '<br />'
            }
            return val[0].axisValue + '<br />' + w
          },
          textStyle: {
            color: '#000'
          }
        },
        legend: {
          show: true,
          x: 'center',
          top: '15%'
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '6%',
          top: '25%',
          containLabel: true
        },
        toolbox: {
          show: true,
          right: 20,
          itemGap: 10,
          itemSize: 25,
          showTitle: false,
          feature: {
            saveAsImage: {
              icon: 'image://images/download.png'

            },
            itemSize: 25, // 工具栏 icon 的大小
            emphasis: { // 触发时
              iconStyle: {
                borderColor: '#000' // 图形的描边颜色
              }
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: ['1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时',
            '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时', '24时'
          ],
          splitLine: {
            show: true
          },
          axisLine: {
            onZero: false
          },
          axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
            show: true,
            rotate: 0,
            margin: 8,
            // formatter: null,
            textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              color: '#7b7b7b',
              fontSize: 14
            }
          },
          splitArea: { // 分隔区域
            show: true, // 默认不显示，属性show控制显示与否
            // onGap: null,
            areaStyle: { // 属性areaStyle（详见areaStyle）控制区域样式
              color: ['rgba(250,215,57,0)']
            }
          }
        },
        yAxis: {
          type: 'value',
          splitNumber: 6,
          axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
            show: true,
            margin: 8,
            // formatter: null,
            textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              color: '#7b7b7b',
              fontSize: 14
            }
            // formatter: function(value) {
            //   return (value) + '℃';
            // }
          }
        },
        series: [{
          name: '实况',
          type: 'line',
          smooth: false,
          symbolSize: 7,
          itemStyle: {
            normal: {
              barBorderRadius: [10, 10, 0, 0]
            }
          },
          label: {
            show: false,
            position: 'top',
            color: '#dea24d',
            shadowBlur: 2,
            shadowColor: 'black',
            shadowOffsetX: 2,
            textStyle: {
              fontSize: 14
            },
            formatter: '{b}'
          },
          areaStyle: {
            normal: {
              lineStyle: {
                color: 'rgba(237,207,125,1)'
              },
              color: new this.$echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [{
                  offset: 0,
                  color: 'rgba(131,174,224,0.3)'
                },
                {
                  offset: 0.5,
                  color: 'rgba(131,174,224,0.05)'
                },
                {
                  offset: 1,
                  color: 'rgba(131,174,224,0)'
                }
                ]
              )
            }
          },
          data: bar_chart
        }]
      })

      // 渲染柱状图
      // 将数据某一项提出重新组成数组
      const pie_chart = this.data_list.hourly.data.map(({
        windBearing
      }) => windBearing)

      this.myChart = this.$echarts.init(document.getElementById('my_pie_Chart'))
      this.myChart.setOption({
        color: ['#28cba3', '#e6b640', '#34aae7', '#ed4d86', '#ab38e6', '#4feed6', '#4adb65', '#c9f86d', '#eedf77',
          '#f5bd5b', '#f57957'
        ],
        title: {
          text: ['{a|' + this.data_list.name + '}'],
          subtext: '数据时间：' + data_time,
          x: 'center',
          y: '1%',
          textStyle: {
            rich: {
              a: {
                color: '#28cba3',
                lineHeight: 20,
                fontSize: 20
              },
              b: {
                color: '#28cba3',
                lineHeight: 18,
                fontSize: 15
              }
            }
          },
          subtextStyle: {
            color: '#28cba3',
            lineHeight: 30,
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/> {c}'
        },
        toolbox: {
          show: true,
          right: 20,
          itemGap: 10,
          itemSize: 25,
          showTitle: false,
          feature: {
            saveAsImage: {
              icon: 'image://images/download.png'

            },
            itemSize: 25, // 工具栏 icon 的大小
            emphasis: { // 触发时
              iconStyle: {
                borderColor: '#000' // 图形的描边颜色
              }
            }
          }
        },
        series: [{
          name: '实况',
          type: 'pie',
          radius: '60%', // 设置饼图大小
          center: ['50%', '50%'], // 设置饼图位置
          label: {
            show: false
          },
          data: pie_chart
        }]
      })

      // 渲染漏斗图
      // 将数据某一项提出重新组成数组
      const funnel_chart = this.data_list.hourly.data.map(({
        humidity
      }) => humidity)

      this.myChart = this.$echarts.init(document.getElementById('my_funnel_Chart'))
      this.myChart.setOption({
        color: ['#28cba3', '#e6b640', '#34aae7', '#ed4d86', '#ab38e6', '#4feed6', '#4adb65', '#c9f86d', '#eedf77',
          '#f5bd5b', '#f57957'
        ],
        title: {
          text: ['{a|' + this.data_list.name + '}'],
          subtext: '数据时间：' + data_time,
          x: 'center',
          y: '1%',
          textStyle: {
            rich: {
              a: {
                color: '#ed4d86',
                lineHeight: 20,
                fontSize: 20
              },
              b: {
                color: '#ed4d86',
                lineHeight: 18,
                fontSize: 15
              }
            }
          },
          subtextStyle: {
            color: '#ed4d86',
            lineHeight: 30,
            fontSize: 14
          }
        },
        legend: {
          show: true,
          x: 'center',
          top: '15%'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/> {c}'
        },
        toolbox: {
          show: true,
          right: 20,
          itemGap: 10,
          itemSize: 25,
          showTitle: false,
          feature: {
            saveAsImage: {
              icon: 'image://images/download.png'
            },
            itemSize: 25, // 工具栏 icon 的大小
            emphasis: { // 触发时
              iconStyle: {
                borderColor: '#000' // 图形的描边颜色
              }
            }
          }
        },
        series: [{
          name: '实况',
          type: 'funnel',
          orient: 'horizontal',
          funnelAlign: 'center',
          top: '110',
          label: {
            show: false,
            position: 'inside'
          },
          data: funnel_chart
        }]
      })
    }
  }
}
</script>
<style lang="less" scoped="scoped">
  .content_title {
    width: 100%;
    height: 100%;
    display: flex;
    padding-bottom: 20px;
    border-bottom: 1px solid #f5f5f5;

    span {
      font-size: 18px;
      height: 25px;
      line-height: 25px;
      color: #434343;
      display: inline-block;
      margin-left: 10px;
    }sss

    p {
      width: 5px;
      height: 25px;
      background-color: #34bdfc;
    }
  }

  .el-card {
    margin-top: 20px;
    height: calc(100vh - 195px);

    .chart_list {
      width: 100%;
      float: left;
      margin-top: 20px;
      height: calc(100vh - 300px);
      overflow-y: auto;

      ul li {
        width: 48%;
        float: left;
        margin-bottom: 20px;
        list-style: none;

        .chart {
          width: 100%;
          height: 500px;
        }
      }

      ul li:nth-child(even) {
        margin-left: 4%;
      }
    }
  }
</style>
